<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<!-- <view class="search-content ">


			<image class="search-img" :src="search" mode=""></image>
			<input placeholder="请搜索搭子标题名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

		</view> -->
		<view class="messagesList ">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class=" margin-top_20rpx" v-for="(item,index) in list " :key="index" @click="toDetailFn(item)">
					<view class="flex" style="margin: 40rpx 0;">
						<view  class="" >

							<text>{{item.create_time}}</text>
						</view>
						<!-- <view class="news flex">
				
						<text>{{numberMessages(count)}}</text>
					</view> -->
					</view>
					<view class="content  " >
						<!-- <image class="avatar" src="../../static/第一行所有图标/矩形 141.png" mode=""></image> -->
						
						
				
						




						<scroll-view :scroll-y="false" style="height: 190rpx;">
							<view class="flex-start-center font-weight " style="color: #333333;margin-bottom: 20rpx;">
								{{item.title}}
							
							
							</view>
							<uv-parse  :content="item.content" :selectable="true" :tagStyle="style"></uv-parse>
						</scroll-view>
					</view>

				</view>
			</mescroll-body>


		</view>
		<view style="height: 120rpx;">
		
		</view>
		<tqb-tabbar activeIndex="3" />
	</view>
</template>

<script>
	import tqbTabbar from '../../components/tqb-tabbar/tqb-tabbar.vue'
	export default {
		components: {
			tqbTabbar
		},
		data() {
			return {
				daziBg1: this.$img.daziBg1,
				search: this.$img.search,
				userInfo: uni.getStorageSync("userInfo"),
				test: '<p>&nbsp;中国质量新闻网讯 厦门市应对新冠肺炎疫情工作指挥部 发布11号通告后，思明区市场监管局迅速行动，昼夜出 击，从严从实从细贯彻通告要求，既注意抓严格执法， 也注意工作方式方法。</p>\n<p><img src=\"https://dazi.weijuyunke.cn/storage/uploads/20240911/ec1356c6d1ac4a92b26ae352b313a1e6.jpg\" alt=\"\" width=\"350\" height=\"288\" /></p>\n<p>&nbsp;中国质量新闻网讯 厦门市应对新冠肺炎疫情工作指挥部 发布11号通告后，思明区市场监管局迅速行动，昼夜出 击，从严从实从细贯彻通告要求，既注意抓严格执法， 也注意工作方式方法。</p>',
				downOption: {
					auto: false
				},
				style: {
					// 字符串的形式

					p: 'font-size: 22rpx;color: #999999;'
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				list: [],
				searchVal: '',
				count: '',
				messageList: [],

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 1500;
				}
			});


		},
		methods: {
			toDetailFn(item){
				
				this.$sun.navGo('/pagesA/personalCenter/notificationDetails',{...item})
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.message,
					data: {
						page: scroll.num,
						limit: 10,




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);





					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},

			async tabClassIfyFn() {
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {

						type: 3,
						// pid:0,
						top: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)
					this.tabsList = resPoster.data.list
					if (resPoster.data.list.length) {
						this.son_tab = resPoster.data.list[0].id
					}
					this.tabs = resPoster.data.list.slice(0, 5).map((item) => {
						return item.name;
					});
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			// unReadMessage


		},
		computed: {
			numberMessages: function() {
				return function(num) {

					if (num > 99) {

						return String(99) + '+';
					} else {

						return String(num);
					}
				};
			}
		},
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		height: 100vh;
		padding: 10rpx 30rpx 30rpx  30rpx;

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			// margin: 20rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.messagesList {
			.content {
				padding: 20rpx;

				width: 692rpx;
				height: 230rpx;
				border-radius: 22rpx;
				overflow-y: hidden;

				background: rgb(255, 255, 255);
			}

			.avatar {
				width: 122rpx;
				height: 124rpx;
				border-radius: 50%;
			}

			.female {
				width: 96rpx;
				height: 36rpx;
				border-radius: 20rpx;
				color: #fff;
				background: #FA5799;

				.femaleImg {
					width: 10.48px;
					height: 10.48px;
					margin-right: 10rpx;
				}
			}

			.male {
				width: 96rpx;
				height: 36rpx;
				border-radius: 20rpx;
				color: #fff;
				background: rgb(1, 145, 255);

				.maleImg {
					width: 10.48px;
					height: 10.48px;
					margin-right: 10rpx;
				}
			}

			.news {
				width: 55rpx;
				height: 55rpx;
				background-color: red;
				border-radius: 50%;
				color: #fff;
			}

		}



	}
</style>